<template>
  <div class="tabledivss">
    <el-row :gutter="24">
      <el-col :span="8">
        <el-card shadow="hover">
          <el-menu :default-active=isxuanzhong class="el-menu-vertical-demo" @select="xuanzeindex" background-color="#ffffff" text-color="#666666" active-text-color="#1d3f95">
            <el-menu-item-group>
              <div style="height: 40px;color: #343434;">入会申请</div>
              <el-menu-item index="1">综合类会员</el-menu-item>
              <el-menu-item index="2">交易类会员</el-menu-item>
              <el-menu-item index="3">承销类会员</el-menu-item>
              <el-menu-item index="4">经济类会员</el-menu-item>
              <el-menu-item index="5">服务类会员</el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover">
          <el-form :model="ruleForm" ref="ruleForm" :rules="PassRules" label-width="170px" class="demo-ruleForm">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入企业名称"></el-input>
              <div class="shuoming">注：需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致， 信息审核审核成功后，企业名称不可修改</div>
            </el-form-item>

            <el-form-item label="统一社会信用代码" prop="yingyezhizhaoNumber">
              <el-input v-model="ruleForm.yingyezhizhaoNumber" placeholder="请输入营业执照注册号"></el-input>
              <div class="shuoming">注：请输入15位营业执照注册号或18位的统一社会信用代码</div>
            </el-form-item>

            <el-form-item label="营业执照">
              <el-upload class="avatar-uploader" :action="shangchuanurl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers">
                <img v-if="yingyezhizhaoimageurl" :src="yingyezhizhaoimageurl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="shuoming">注：请提供企业营业执照复印件并加盖公章，然后以扫描件或者图片形式上传</div>
            </el-form-item>

             <el-form-item label="法定代表人" prop="farendaibiaostr"><el-input v-model="ruleForm.farendaibiaostr" placeholder="请输入法定代表人"></el-input></el-form-item>

            <el-form-item label="法定代表人身份证号码" prop="farenshenfenzheng">
              <el-input v-model="ruleForm.farenshenfenzheng" placeholder="请输入法定代表人身份证号码"></el-input>
            </el-form-item>

            <!-- 身份证 -->

            <el-form-item label="身份证照片"  >
              <div style="display: flex;">
                <el-upload class="avatar-uploader" :action="shangchuanurl" :show-file-list="false" :on-success="shenfenzhengzhengmianSuccess" :before-upload="beforeAvatarUpload" :headers="headers">
                  <img v-if="shenfenzhengzhengmianimageurl" :src="shenfenzhengzhengmianimageurl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div style="width: 50px;"></div>

                <el-upload class="avatar-uploader" :action="shangchuanurl" :show-file-list="false" :on-success="shenfenzhengfanmianSuccess" :before-upload="beforeAvatarUpload" :headers="headers">
                  <img v-if="shenfenzhengfanmianimageurl" :src="shenfenzhengfanmianimageurl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div style="display: flex;">
                <div class="shangchuanshenfentitle" style="margin-left: 15px;">证件正面（人像面）</div>
                <div class="shangchuanshenfentitle" style="margin-left: 65px;">证件反面（国徽面）</div>
              </div>
              <div class="shuoming">
                <p>注： 1.需上传身份证正面、反面共两张照片</p>
                <p>2.照片大小不超过5MB,支持jpg、png格式</p>
              </div>
            </el-form-item>

            <!-- 入会申请 -->

            <el-form-item label="入会申请书"  >
              <el-upload
                :action="shangchuanurl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="ruhuishenqingSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
                :fileList="shenqingshuimageurlListdata"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible"><img width="100%" :src="shenqingshuimageurl" alt="" /></el-dialog>
              <div class="shuoming">
                注：上传入会申请书（复印件盖公章）扫描件或图片
                <a :href="mubanurl" style="text-decoration:none"><span style="color: red;">点击下载《入会申请书》</span></a>
                模板
              </div>
            </el-form-item>
          </el-form>

          <el-form>
            <el-form-item style="padding-left: 150px;">
              <el-button type="primary" v-show="isbuttonshow"  style="width: 180px;margin-right: 50px;" @click="onSubmit('ruleForm')">{{buttonstr}}</el-button>
              <el-button type="danger" @click="quxiao" style="width: 180px;">关闭</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { vipSubmit } from "@/api/vipapi.js";
import store from '@/store'
import { getVipdata } from "@/api/vipapi.js";
  import { getRuhuishenqingmuban } from "@/api/vipapi.js";

export default {
  name: 'vipshenqingview',
  props: {
    isxuanzhongstr: {
         type: String,
         default: "",
        }
  },
  data() {
    return {
      data: [],
      shangchuanurl:'http://192.168.1.7:8002/api/sys/common/upload/',
      wldata:'',
      mubanurl:'',
      


      isxuanzhong: '1', //选择第几个
      ruleForm: {
        name: '',
        yingyezhizhaoNumber: '',
        farendaibiaostr: '',
        farenshenfenzheng: ''
      },

      headers: {
        'App-Access-Token': store.getters.getToken

      },
      PassRules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        yingyezhizhaoNumber: [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }],
        farendaibiaostr: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
        farenshenfenzheng: [{ required: true, message: '请输入法定代表人身份证号码', trigger: 'blur' }],
        yingyezhizhaoimageurl: [{ required: true, message: ' ', trigger: 'blur' }],
        shenqingshuimageurl: [{ required: true, message: ' ', trigger: 'blur' }],
        shenfenzhengzhengmianimageurl: [{ required: true, message: ' ', trigger: 'blur' }],
        shenfenzhengfanmianimageurl: [{ required: true, message: ' ', trigger: 'blur' }],


      },
      yingyezhizhaoimageurl: '',
      shenqingshuimageurl: '',
      shenqingshuimageurlList: [],
      shenqingshuimageurlListdata:[],

      dialogVisible: false,
      shenfenzhengzhengmianimageurl: '',
      shenfenzhengfanmianimageurl: '',
      buttonstr:'立即申请',
      isbuttonshow:false
    };
  },

  created() {
    this.isxuanzhong = this.isxuanzhongstr;
    this.getNewdata();
  },
  methods: {


    getNewdata(){
          const _self = this;
          this.shenqingshuimageurlList = [];
          this.shenqingshuimageurlListdata = [];


            getVipdata({
              type:_self.isxuanzhong


             }).then((res) => {
               let { success, message } = res.data;
               if (success) {
                 // _self.$message.success(message);

                 _self.wldata = res.data.result;

                 if(_self.wldata.auditState === 2){
                   //申请通过
                    _self.isbuttonshow = false;


                    _self.$message.error("您已经通过会员审核");

                 }else if(_self.wldata.auditState === 0){
                   //未申请
                   _self.buttonstr = '立即申请'
                    _self.isbuttonshow = true;



                 }else if(_self.wldata.auditState == 1 ||_self.wldata.auditState == 3){
                   //编辑
                   _self.buttonstr = '重新提交'
                   _self.isbuttonshow = true;
                   _self.ruleForm.farenshenfenzheng = _self.wldata.idNo;
                   _self.ruleForm.yingyezhizhaoNumber = _self.wldata.unionCredit;
                   _self.ruleForm.name = _self.wldata.name;
                   _self.ruleForm.farendaibiaostr = _self.wldata.legalName;
                   for (let imageindex in _self.wldata.material) {

                     let imagedata = _self.wldata.material[imageindex];



                     if (imagedata.type == '0'){

                       _self.yingyezhizhaoimageurl = imagedata.storeUrl;
                     }
                     if (imagedata.type  == '1'){
                       _self.shenfenzhengzhengmianimageurl = imagedata.storeUrl;
                     }
                     if (imagedata.type  == '2'){
                       _self.shenfenzhengfanmianimageurl = imagedata.storeUrl;
                     }
                     if (imagedata.type  == '3'){
                       _self.shenqingshuimageurl = imagedata.storeUrl;
                       _self.shenqingshuimageurlList =   _self.shenqingshuimageurlList.concat(_self.shenqingshuimageurl);
                       let imagelistdata={
                         url:_self.shenqingshuimageurl
                       }
                       _self.shenqingshuimageurlListdata =   _self.shenqingshuimageurlListdata.concat(imagelistdata);



                     }

                   }

                 }


               } else {
                 _self.$message.error(message);
                  _self.isbuttonshow = false;
               }
             });

 
        getRuhuishenqingmuban({
    
         }).then((res) => {
           let { success, message } = res.data;
           if (success) {
    
             this.mubanurl = res.data.message;
    
    
           } else {
             _self.$message.error(message);
           }
         });

    },




    handleCurrentChange(val) {
      //刷新数据
      this.$emit('WLpageindex', val);
    },
    //回调详情
    cellxiangqing(event) {
      // console.log(event)
      this.$emit('WLcellClick', event);
    },

    xuanzeindex(index) {
      this.isxuanzhong =index;
       this.getNewdata();
    },
    //提交
    onSubmit(formName) {
        const _self = this;
      // console.log(this.shenfenzhengzhengmianimageurl);
      // console.log(this.shenfenzhengfanmianimageurl);
      // console.log(this.yingyezhizhaoimageurl);
      this.$refs[formName].validate(valid => {
        if (valid) {

          if(!this.yingyezhizhaoimageurl){
            this.$message.error('请上传营业执照图片');
            return;
          }
          if(!this.shenfenzhengzhengmianimageurl){
            this.$message.error('请上传身份证正面图片');
             return;
          }
          if(!this.shenfenzhengfanmianimageurl){
            this.$message.error('请上传身份证反面图片');
             return;
          }
          if(this.shenqingshuimageurlList.length==0){
            this.$message.error('请上传申请书图片');
             return;
          }


          let imageshenqingList = [];


          	let len = this.shenqingshuimageurlList.length;
          	for (let i = 0; i < len; i++) {
          		let imagedata = {
          			type: 3,
          			storeName: '入会申请书',
          			storeUrl: this.shenqingshuimageurlList[i],
           		};
          		imageshenqingList.push(imagedata);

          	}

          //添加身份证 营业执照
          let shenfenzhengzhengmian = {
          	type: 1,
          	storeName: '身份证正面照片',
          	storeUrl: this.shenfenzhengzhengmianimageurl,
          };
          imageshenqingList.push(shenfenzhengzhengmian);
          let shenfenzhengfanmian = {
          	type: 2,
          	storeName: '身份证反面照片',
          	storeUrl: this.shenfenzhengfanmianimageurl,
          };
          imageshenqingList.push(shenfenzhengfanmian);
          let yingyezhizhao = {
          	type: 0,
          	storeName: '营业执照',
          	storeUrl: this.yingyezhizhaoimageurl,
          };
          imageshenqingList.push(yingyezhizhao);

          vipSubmit({
             name: _self.name,
             unionCredit:_self.ruleForm.yingyezhizhaoNumber,
             legalName:_self.ruleForm.farendaibiaostr,
             idNo:_self.ruleForm.farenshenfenzheng,
             memberType:_self.isxuanzhong,
             material:imageshenqingList


           }).then((res) => {
             let { success, message } = res.data;
             if (success) {
               _self.$message.success(message);

               this.$emit('WLquxiaoguanbi', '2');

             } else {
               _self.$message.error(message);
             }
           });

        } else {
          return false;
        }
      });


    },
    quxiao() {
      this.$emit('WLquxiaoguanbi', '2');
    },

    //上传图片 营业执照
    handleAvatarSuccess(res, file) {
      this.yingyezhizhaoimageurl =res.message;
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isJPG = true;

      const isLt2M = file.size / 1024 / 1024 < 5;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    //身份证
    shenfenzhengzhengmianSuccess(res, file) {
      this.shenfenzhengzhengmianimageurl = res.message;
    },
    shenfenzhengfanmianSuccess(res, file) {
      this.shenfenzhengfanmianimageurl = res.message;
    },
    //上传申请书

    ruhuishenqingSuccess(res, file) {
      // this.yingyezhizhaoimageurl = res.message;
      this.shenqingshuimageurlList =   this.shenqingshuimageurlList.concat(res.message);

    },

    handleRemove(file, fileList) {
      this.shenqingshuimageurlList = [];
      if(fileList.length > 0){

        let len = fileList.length;
        for (let i = 0; i < len; i++) {

          if (fileList[i].response){
            this.shenqingshuimageurlList.push(fileList[i].response.message);

          }

          if (fileList[i].url){
            this.shenqingshuimageurlList.push(fileList[i].url);

          }


        }

      }else{
         this.shenqingshuimageurlList = [];
      }



    },
    handlePictureCardPreview(file) {


      // this.shenqingshuimageurl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.tabledivss {
  width: 1200px;
  max-height: 940px;
  padding: 30px 0 30px 0px;
  background-color: #f0f0f0;
  margin-bottom: 20px;

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    background-color: #f0f0f0;
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }

  .is-active {
  	color: #1d3f95 !important;
  	background-color: #ffffff !important;
  	border-radius: 0px;

  }
  .el-menu-item {
      font-size: 14px;
      color: #303133;
      padding: 0 20px;
      cursor: pointer;
      transition: border-color .3s,background-color .3s,color .3s;
      box-sizing: border-box;
      border-bottom: solid 1px #f0f0f0;

  }
  .el-tabs__item {
  	color: #1d3f95;
  	padding: 0;
  	width: 120px;
  	text-align: center;
  	height: 42px;
  }
  .el-tabs__nav-wrap::after {
  	background-color: #1d3f95;
  }
  .el-tabs__active-bar {
  	background-color: #1d3f95;
  }

  .el-menu {
    border-right: solid 0px #ffffff;
  }
}
.wlmainW {
  width: 1200px;
}
.shuoming {
  margin-top: 5px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #9a9a9a;
  line-height: 14px;
}

.shangchuanshenfentitle {
  height: 45px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #343434;
  line-height: 36px;
}
</style>
